<template>
  <div>
    <el-submenu :index="child.pathName">
        <template slot="title">
          <i :class="child.icon"></i>
          <span>{{child.name}}</span>
        </template>
        <template v-for="(item, k) in child.children">
          <recursive-sub-menu 
            v-if="item.children && item.children.length > 0" 
            :key="k" 
            :index="index + '_' + k" 
            :child="item" 
            @slideSelect="slideSelect"></recursive-sub-menu>
          <el-menu-item 
            :key="k" 
            v-else 
            :index="index + '_' + k" 
            @click.native="slideSelect({index: index + '_' + k, pathName: item.pathName})">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </el-menu-item>
        </template>
      </el-submenu>
  </div>
</template>

<script>
export default {
  name:'RecursiveSubMenu',
  props: {
    child: {
      type: Object,
      default: ()=>({})
    },
    index: [String]
  },
  data() {
    return {

    }
  },
  methods: {
    slideSelect(obj){
      this.$emit('slideSelect', obj)
    }
  }
}
</script>

<style scoped>

</style>